<template>
  <bd-popup
    class="custom"
    popupId="globalRewardUser"
    :weights="1"
    v-model:show="props.show"
    :style="{
      'background-color': 'transparent',
      overflow: 'initial',
    }"
    zIndex="999996"
    teleport="body"
    :overlay-style="{ background: 'rgba(0, 0, 0, 0.5)' }"
    :close-on-click-overlay="false"
  >
    <!-- 背景光环 -->
    <img class="gh" src="/image/inviteFriends/ferr-gh-icon.svg" />
    <!-- 蝴蝶结 -->
    <img class="hdj" src="/image/inviteFriends/free-hdj-icon.svg" />
    <!-- 容器 -->
    <div class="box">
      <div class="box-box">
        <div class="box-box-box">
          <!-- 标题 -->
          <div class="box-title">
            <!-- 容器背景 -->
            <img class="box-title-bg" src="/image/titlebg-icon.svg" />
            <!-- 标题 -->
            <div class="box-title-value">
              {{ $t("lotteryMoney.hyldbdc") }}
            </div>
          </div>
          <!-- 描述 -->
          <div class="box-desc">
            {{ $t("lotteryMoney.ndhysfl").split("xxx")[0] }}
            <span class="box-desc-name">
              {{ userNameToFormat(name) }}
            </span>
            {{ $t("lotteryMoney.ndhysfl").split("xxx")[1] }}
          </div>
          <!-- 卡片 -->
          <div class="box-card items-center">
            <img class="box-card-bg" src="/image/pledge/gloab-jj-icon.png" />
            <div class="box-card-bdc">+{{ toThousands(bdc) }} BDC</div>
          </div>

          <!-- 底部按钮 -->
          <div class="box-footer items-center" @click="confirm">
            <div class="box-footer-btn">
              {{ $t("lotteryMoney.sxbtn") }}
            </div>
          </div>
        </div>
      </div>
      <!-- 底部按钮-背景 -->
      <img
        class="box-footer-bg"
        src="/image/inviteFriends/ferr-footerbg-icon.svg"
      />
    </div>
  </bd-popup>
</template>
<script setup lang="ts" name="globalRewardPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { claimNewUserBonus } from "@/api/lottery";

const props = withDefaults(
  defineProps<{
    show: boolean;
    bdc: number;
    name: string;
  }>(),
  {
    show: false,
    bdc: 0,
    name: "",
  }
);

const emit = defineEmits(["update:show", "confirm"]);
const { t } = useI18n();

onMounted(() => {});
onBeforeUnmount(() => {});

// 点击确认
const confirm = () => {
  claimNewUserBonus({
    sourceType: 2,
    prizeType: 3,
  }).then((res) => {
    if (res) {
      showToast(t("lotteryMoney.sxSuccess"));
      // 传递: 用户全部可用免费次数
      emit("confirm", res.freeDrawCount);
    } else {
      emit("confirm", 0);
    }
  });
};
</script>
<style lang="scss" scoped>
.gh {
  position: absolute;
  top: -92 * 2px;
  width: 100vw;
}
.hdj {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  top: -48 * 2px;
}
.box {
  position: relative;
  z-index: 9;
  margin: 0 40 * 2px;
  background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
  border-radius: 12 * 2px;
  overflow: hidden;
  padding: 4 * 2px 4 * 2px 4 * 2px 4 * 2px;
  &-box {
    background: linear-gradient(0deg, #fff 59.68%, #fff6eb 100%);
    border-radius: 12 * 2px;
    overflow: hidden;
    padding: 4 * 2px 4 * 2px 0 4 * 2px;
    &-box {
      background: linear-gradient(0deg, #fff 59.68%, #fff6eb 100%);
      border-radius: 12 * 2px;
      overflow: hidden;
      padding: 10 * 2px 7 * 2px 0 7 * 2px;
      border: 1px solid #ffefdb;
      position: relative;
    }
  }
  &-title {
    width: 100%;
    height: 30 * 2px;
    position: relative;
    margin-bottom: 10 * 2px;
    &-bg {
      position: absolute;
      top: 0;
      height: 30 * 2px;
    }
    &-value {
      position: relative;
      z-index: 9;
      height: 30 * 2px;
      line-height: 30 * 2px;
      width: 100%;
      text-align: center;
      font-size: 15 * 2px;
      color: #fff;
      font-weight: 590;
    }
  }

  &-desc {
    text-align: center;
    font-size: 12 * 2px;
    color: #141924;
    // margin-bottom: 15 * 2px;

    &-name {
      font-size: 15 * 2px;
      color: #007bff;
      font-weight: 590;
    }
  }

  &-card {
    position: relative;
    justify-content: center;
    height: 104 * 2px;
    // margin-bottom: 20 * 2px;

    &-bg {
      position: absolute;
      top: 0;
      width: 100%;
    }
    &-bdc {
      position: absolute;
      bottom: -6 * 2px;
      z-index: 9;
      color: #007bff;
      font-size: 17 * 2px;
      font-weight: 590;

      padding: 2.5 * 2px 10 * 2px;
      border-radius: 139px;
      border: 1px solid #fff;
      background: #d8ebff;
    }
  }
  &-footer {
    position: relative;
    justify-content: center;
    align-items: end;
    height: 96 * 2px;
    &-bg {
      position: absolute;
      bottom: -8 * 2px;
      z-index: 8;
      width: 100%;
      margin-left: -4 * 2px;
    }
    &-btn {
      position: relative;
      z-index: 9;
      border-radius: 100px;
      background: linear-gradient(270deg, #fb7f09 0.03%, #ffb901 99.97%);
      color: #fff;
      font-size: 15 * 2px;
      font-weight: 590;
      text-align: center;
      width: 100%;
      padding: 10 * 2px 12 * 2px;
      margin-bottom: 15 * 2px;
    }
  }
}
</style>
